<template>
    <view style="padding:10px;color: #333;font-weight: 500;">
        <view style="padding: 10px 0"><text>1、设置单选和父级不可选</text></view>
        <button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini" @click="itemclick(false, false)">设置</button>
        <view style="padding: 10px 0"><text>2、设置多选和父级不可选</text></view>
        <button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini" @click="itemclick(true, false)">设置</button>
        <view style="padding: 10px 0"><text>3、设置单选和父级可选</text></view>
        <button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini" @click="itemclick(false, true)">设置</button>
        <view style="padding: 10px 0"><text>4、设置多选和父级可选</text></view>
        <button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini" @click="itemclick(true, true)" >设置</button>
        <view style="padding: 10px 0"><text>4、设置多选和父级可选和父级关联子级选择</text></view>
        <button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini" @click="itemclick(true, true, true)" >设置</button>
        <view style="padding: 10px 0"><text>5、设置默认回显(默认选中: '上海-2', '黄埔区-35')</text></view>
        <button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini" @click="echoDefault()" >设置</button>
        <!-- 异步加载demo -->
        <view style="padding: 10px 0"><text>6、异步加载渲染demo</text></view>
        <button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini" @click="openTree()" >设置</button>
    </view>

    <!-- 异步加载demo -->
    <next-tree :selectParent="false" :checkStrictly="true" :multiple="true" ref="nextTreeAsyncRef" :treeData="asyncTreeData" :loadData="loadData" />

    <next-tree :expandedKeys="['3','3-1']" :changeVerify="changeVerify" :title="getTitle" ref="nextTreeRef" :checkStrictly="checkStrictly" :selectParent="selectParent" :multiple="multiple" :treeData="treeData"  @cancel="oncancel" @confirm="onconfirm">
        <!-- label插槽示意代码 -->
        <!-- <template #label="{data: {id, label, iconSrc, prev, post}}">
            <view class="line-block">
                <image class="img" v-if="iconSrc" :src="iconSrc"></image>
                <text space="nbsp" v-if="prev">{{prev}}&nbsp;</text><text>{{label}}</text><text space="nbsp" v-if="post">&nbsp;{{post}}</text>
            </view>
        </template> -->
        <!-- <template #topBar>
            <view style="color: #666;padding:5px;"><text style="font-size: 12px;">历史记录</text></view>
            <view style="display: flex;justify-content: space-between;padding-bottom: 10px;border-bottom: 1rpx solid #f0f0f0;">
                <button @click="checkedFunc('1-3-3-4')"  :style="'background-color:'+ (activeId === '1-3-3-4' ? '#f9ae3d' : '#ccc') + ';color:#fff;margin: 5px'" size="mini">北京区-4</button>
                <button @click="checkedFunc('3-1-2')"  :style="'background-color:'+ (activeId === '3-1-2' ? '#f9ae3d' : '#ccc') + ';color:#fff;margin: 5px'" size="mini">海珠区-2</button>
                <button @click="checkedFunc('3-1-6')"  :style="'background-color:'+ (activeId === '3-1-6' ? '#f9ae3d' : '#ccc') + ';color:#fff;margin: 5px'" size="mini">海珠区-5</button>
            </view>
        </template> -->
    </next-tree>
</template>

<script>
let self = null;
export default {
    data () {
        return {
            multiple: false,
            selectParent: false,
            checkStrictly: false,
            activeId: '',
            localData:{
                'a1': [{id: 'a1-1', label: 'a1-1'}, {id: 'a1-2', label: 'a1-2',children: [] },{id: 'a1-3', label: 'a1-3'}],
                'b1': [{id: 'b1-1', label: 'b1-1',children: []}, {id: 'b1-2', label: 'b1-2'},{id: 'b1-3', label: 'b1-3'}],
                'c1': [{id: 'c1-1', label: 'c1-1'}, {id: 'c1-2', label: 'c1-2'},{id: 'c1-3', label: 'c1-3',children: []}],
                'a1-2': [{id: 'a1-2-1', label: 'a1-2-1'}, {id: 'a1-2-2', label: 'a1-2-2'}],
                'b1-1': [{id: 'b1-1-1', label: 'b1-1-1'}, {id: 'b1-1-2', label: 'b1-1-2'}],
                'c1-3': [{id: 'c1-3-1', label: 'c1-3-1'}, {id: 'c1-3-2', label: 'c1-3-2'}]
            },
            asyncTreeData: [{id: 'a1', label: 'a1', children: []},{id: 'b1', label: 'b1', children: []},{id: 'c1', label: 'c1', children: []}],     
            treeData: [
                {id: '1', label: '北京', checked: false},
                {id: '2', label: '上海', checked: false, children: [
                    {id: '2-1', label: '上海-1', checked: false},
                    {id: '2-2', label: '上海-2', checked: false},
                    {id: '2-3', label: '上海-3', checked: false},
                ] },
                {id: '3', label: '广州', children: [
                        {id: '3-1', label: '海珠区', checked: false, children: [
                            {id: '3-1-1', label: '海珠区-1', checked: false, disabled: true},
                            {id: '3-1-2', label: '海珠区-2', checked: false},
                            {id: '3-1-4', label: '海珠区-3', checked: false},
                            {id: '3-1-5', label: '海珠区-4', checked: false},
                            {id: '3-1-6', label: '海珠区-5', checked: false},
                            {id: '3-1-7', label: '海珠区-6', checked: false},
                            {id: '3-1-8', label: '海珠区-7', checked: false},
                            {id: '3-1-9', label: '海珠区-8', checked: false},
                            {id: '3-1-10', label: '海珠区-9', checked: false},
                            {id: '3-1-11', label: '海珠区-10', checked: false},
                        ]},
                        {id: '3-2', label: '番禺区', checked: false, children: [
                            {id: '3-2-1', label: '番禺区-1', checked: false},
                            {id: '3-2-2', label: '番禺区-2', checked: false},
                            {id: '3-2-4', label: '番禺区-3', checked: false},
                            {id: '3-2-5', label: '番禺区-4', checked: false},
                            {id: '3-2-6', label: '番禺区-5', checked: false},
                            {id: '3-2-7', label: '番禺区-6', checked: false},
                            {id: '3-2-8', label: '番禺区-7', checked: false},
                            {id: '3-2-9', label: '番禺区-8', checked: false},
                            {id: '3-2-10', label: '番禺区-9', checked: false},
                            {id: '3-2-11', label: '番禺区-10', checked: false},
                        ]},
                        {id: '3-3', label: '黄埔区', checked: false, children: [
                            {id: '3-3-1', label: '黄埔区-1', checked: false},
                            {id: '3-3-2', label: '黄埔区-2', checked: false},
                            {id: '3-3-3', label: '黄埔区-3', checked: false},
                            {id: '3-3-4', label: '黄埔区-4', checked: false},
                            {id: '3-3-5', label: '黄埔区-5', checked: false},
                            {id: '3-3-6', label: '黄埔区-6', checked: false},
                            {id: '3-3-7', label: '黄埔区-7', checked: false},
                            {id: '3-3-8', label: '黄埔区-8', checked: false},
                            {id: '3-3-9', label: '黄埔区-9', checked: false},
                            {id: '3-3-10', label: '黄埔区-10', checked: false},
                            {id: '3-3-12', label: '黄埔区-11', checked: false},
                            {id: '3-3-13', label: '黄埔区-12', checked: false},
                            {id: '3-3-13', label: '黄埔区-13', checked: false},
                            {id: '3-3-14', label: '黄埔区-14', checked: false},
                            {id: '3-3-15', label: '黄埔区-15', checked: false},
                            {id: '3-3-16', label: '黄埔区-16', checked: false},
                            {id: '3-3-17', label: '黄埔区-17', checked: false},
                            {id: '3-3-18', label: '黄埔区-18', checked: false},
                            {id: '3-3-19', label: '黄埔区-19', checked: false},
                            {id: '3-3-20', label: '黄埔区-20', checked: false},
                            {id: '3-3-21', label: '黄埔区-21', checked: false},
                            {id: '3-3-22', label: '黄埔区-22', checked: false},
                            {id: '3-3-23', label: '黄埔区-23', checked: false},
                            {id: '3-3-24', label: '黄埔区-24', checked: false},
                            {id: '3-3-25', label: '黄埔区-25', checked: false},
                            {id: '3-3-26', label: '黄埔区-26', checked: false},
                            {id: '3-3-27', label: '黄埔区-27', checked: false},
                            {id: '3-3-28', label: '黄埔区-28', checked: false},
                            {id: '3-3-29', label: '黄埔区-29', checked: false},
                            {id: '3-3-30', label: '黄埔区-30', checked: false},
                            {id: '3-3-31', label: '黄埔区-31', checked: false},
                            {id: '3-3-32', label: '黄埔区-32', checked: false},
                            {id: '3-3-33', label: '黄埔区-33', checked: false},
                            {id: '3-3-34', label: '黄埔区-34', checked: false},
                            {id: '3-3-35', label: '黄埔区-35', checked: false},
                            {id: '3-3-36', label: '黄埔区-36', checked: false},                    
                        ]},
                    ],
                }]
        }
    },
    methods: {
        openTree: function() {
            this.$refs.nextTreeAsyncRef.showTree = true
        },
        changeVerify: function(current, chooseList) {
            // 注意：返回非空字符串会阻止原有行为，并提示返回的字符串
            // 如果函数体不做return返回值，即验证通过，控件正常处理业务
            console.log('当前变化的数据', current)
            console.log('已选择的数据', chooseList)
            if(chooseList && chooseList.length > 4) {

                return '最多可以选择4个节点'
            }
        },
        checkedFunc: function(id) {
            if(this.activeId === id) {
                this.activeId = '';
                this.$refs.nextTreeRef.checkedFunc(id, false)
            } else {
                this.activeId = id;
                this.$refs.nextTreeRef.checkedFunc(id)  
            }
        },
        loadData(nodeItem) {
            // 同步实现的代码处理方式 可以返回单个子节点的集合也可以返回子孙节点的集合
            // 如果期望子集节点中还存在孙子节点可以打开，请在初始化数据的时候，初始化个空数组的子节点配置值{[this.childrenKey]: []}

            // if(nodeItem && this.localData[nodeItem.id]) {
            //  return this.localData[nodeItem.id]
            // } else {
            //  return []
            // }
            // 异步的代码实现方式 可以返回单个子节点的集合也可以返回子孙节点的集合
            // 如果期望子集节点中还存在孙子节点可以打开，请在初始化数据的时候，初始化个空数组的子节点配置值{[this.childrenKey]: []}
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    if(nodeItem && self.localData[nodeItem.id]) {
                        return resolve(self.localData[nodeItem.id])
                    } else {
                        return resolve([])
                    }
                }, 1000)
            })  
        },
        getTitle: function(checked) {
            return `已选：${checked.length}项`
        },
        echoDefault: function() {
            const selectIds = ['2-1','3-3-35']
            this.checkedTreeData(this.treeData, selectIds)
            console.log('treeData的数据：', this.treeData)
            this.multiple = true
            this.$refs.nextTreeRef.showTree = true
        },
        itemclick: function(_multiple, _selectParent, _checkStrictly = false) {
            this.multiple = _multiple
            this.selectParent = _selectParent
            this.checkStrictly = _checkStrictly
            this.$refs.nextTreeRef.showTree = true
        },
        checkedTreeData: function(treeData, selectIds) {
            // 注意 vue2当数据深嵌套时，如果没有在treeData里面初始化checked属性，那在改变数据的时候直接将checked属性赋值为true，这时候ui界面有可能不会更新，
            // 这时候建议使用this.$set去更新checked属性值，或者在初始化this.treeData的时候初始化checked属性
            (treeData || []).map(item => {
                if (selectIds.indexOf(item.id) !== -1) {
                    item.checked = true
                } else {
                    item.checked = false
                }
                if (item.children && item.children.length) {
                    this.checkedTreeData(item.children, selectIds)
                }
            })
        },
        onconfirm: function(list) {
            console.log('选中项的数量列表list：', list)
        },
        oncancel: function() {
            // 清除treeData的选中状态
            this.checkedTreeData(this.treeData, [])
        }
    },
    created() {
        self = this
    }
}
</script>
<style lang="scss">
    .line-block {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        .img {
            width: 40rpx;
            height: 40rpx;
            border-radius: 10rpx;
            margin: 0 20rpx;
        }
    }
</style>